<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页配送地址</title>
    <script src="../公共部分/jQuery/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="./xiangcss.css">
</head>

<body>
    <!-- 配送地址 -->
    <div class="disLocation">
        <div class="distit">
            <span>河南省 郑州市 高新区 中原区</span>
            <i> > </i>
        </div>
        <div class="distits">
            <div class="distits-title">
                <section name="" class="selProvince disactive">请选择省
                </section>
                <section name="" class="selCity">请选择市
                </section>
                <section name="" class="selCounty">区/县
                </section>
                <section name="" class="selJieddao">街道</section>
            </div>
            <ul class="distitscons"></ul>
            <div class="distishi">商品暂时只支持配送至中国大陆地区</div>
        </div>
    </div>
    <script>
        var arr = [{
            name: "河南省",
            hCity: {
                郑州: ["中原区", "二七区", "高新区"],
                新乡: ["红旗区", "牧野区", "高村区"],
                鹤壁: ["山城区", "淇滨区", "浚县"],
            }
        }, {
            name: "河北省",
            hCity: {
                石家庄: ["河区", "北区", "河北区"],
                承德: ["承区", "二德", "承德"],
                衡水: ["衡区", "水区", "衡水区"],
            }
        }, {
            name: "山东省",
            hCity: {
                济源: ["济区", "源区", "济源区"],
                烟台: ["烟区", "台区", "烟台区"],
                菏泽: ["菏区", "泽区", "菏泽区"],
            }
        }];
        $(".disLocation").hover(function() {
            $(".distits").show();
            $(".distit i").css('transform', 'rotateZ(-90deg)')
        }, function() {
            $(".distits").hide();
            $(".distit i").css('transform', 'rotateZ(90deg)')
        })
        $('.distits-title section').click(function() {
            var disthis = $(this);
            console.log($(this).prev().text());
            $(this).addClass('disactive').siblings().removeClass('disactive');
            $('section').each(function(index, value) {
                if ($('section').eq(0).text() == disthis.text()) {
                    $('.distitscons').text('')
                    arr.forEach(function(value, index) {
                        // 添加省
                        $('.distitscons').append('<li><a href="###">' + value.name + '</a></li>');

                        $('.distitscons li').on('click', function() {
                            $(".selProvince").text(this.innerText);
                        })
                    });
                } else if ($('section').eq(1).text() == disthis.text()) {
                    arr.forEach(function(value, index) {
                        if ($('.selProvince').text() == value.name) {
                            $('.distitscons').text('')
                            for (var key in arr[index].hCity) {
                                // 添加城市
                                $('.distitscons').append('<li><a href="###">' + key + '</a></li>');
                                $('.distitscons li').on('click', function() {
                                    $(".selCity").text(this.innerText);
                                })
                            };
                        }
                    })
                } else if ($('section').eq(2).text() == disthis.text()) {
                    arr.forEach(function(value, index) {
                        for (var key in arr[index].hCity) {
                            if ($('.selCity').text() == key) {
                                $('.distitscons').text('')
                                    // 添加区
                                value.hCity[key].forEach(function(value, index) {
                                    $('.distitscons').append('<li><a href="###">' + value + '</a></li>');
                                    $('.distitscons li').on('click', function() {
                                        $(".selCounty").text(this.innerText);
                                    })
                                })
                            }
                        }
                    })
                } else if ($('section').eq(3).text() == disthis.text()) {
                    arr.forEach(function(value, index) {
                        for (var key in arr[index].hCity) {
                            if ($('.selCity').text() == key) {
                                $('.distitscons').text('')
                                    // 添加区
                                value.hCity[key].forEach(function(value, index) {
                                    $('.distitscons').append('<li><a href="###">' + value + '</a></li>');
                                })
                            }
                        }
                    })
                }
            })
        })
    </script>
</body>

</html>